<template>
	<div class="page-recommend">
		<div class="recommend-tit">猜你喜欢看的</div>
		<ul class="recommend-list">
			<li v-for="item of list" :key="item.id">
				<div class="list-pic"><img :src="item.imgUrl" :alt="item.title"></div>
				<div class="list-info">
					<p class="list-info-tit">{{item.title}}</p>
					<p class="list-info-cont">{{item.desc}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	name: 'HomeRecommend',
	props: {
		list: Array
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/setting';
@import '~@/assets/scss/css3';
@import '~@/assets/scss/mixin';
@import '~@/assets/scss/reset';
@import '~@/assets/scss/style';

.page-recommend {
	background: #fff;
	margin-top: px2rem(20px);
	.recommend-tit {
		padding-top: px2rem(24px);
		padding-left: px2rem(20px);
	}
	.recommend-list {
		padding: 0 px2rem(20px);
		li {
			@extend %clearfix;
			padding: px2rem(20px) 0;
			& + li {
				border-bottom: px2rem(1px) solid #f3f3f3;
			}
			img {
				max-width: 100%;
			}
		}
		.list-pic {
			width: px2rem(200px);
			height: px2rem(200px);
			float: left;
		}
		.list-info {
			margin-left: px2rem(220px);
			font-size: 18px;
			.list-info-tit {
				font-weight: 700;
			}
			.list-info-cont {
				font-size: 14px;
				color: #666;
			}
		}
	}
}
</style>